<template>
  <div>
    <img :src="imgList[index]" alt="" />
    <div>
      <button @click="funUp">上一张</button
      ><button @click="funDown">下一张</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: "0",
      imgList: [
        "https://g.autoimg.cn/@img/car3/cardfs/product/g33/M0A/19/E4/468x352_c42_autohomecar__Chto52ivQeSAKXJoAD-tRAcdQ_g198.jpg",
        "https://socialbeta.oss-cn-hangzhou.aliyuncs.com/upload/198246-1703820780.jpg",
        "https://5b0988e595225.cdn.sohucs.com/images/20191020/70766c1459d24b7893a82e0905dd16bd.jpeg",
        "https://img1.mydrivers.com/img/20240613/a9030e59-c056-4116-b5c3-954de699d651.png",
      ],
    };
  },         
  methods: {
    funUp() {
      if (this.index == 0) {
        this.index = this.imgList.length-1;
      } else {
        this.index--;
      }
    },
    funDown() {
      if (this.index == this.imgList.length-1) {
        this.index = 0;
      } else {
        this.index++;
      }
    },
  },
};
</script>

<style>
img {
  width: 400px;
  height: 300px;
}
</style>